<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./css/bese.css" />
    <link rel="stylesheet" href="./css/common.css" />
    <style>
      .top {
        height: 70px;
        border-bottom: 2px solid #b1191a;
      }
      .top img {
        margin-top: 5px;
      }
      .centent {
        height: 520px;
        border: 1px solid #000;
        margin-top: 20px;
      }
      .register_top {
        height: 41px;
        line-height: 41px;
        padding: 0 10px;
        background-color: #ccc;
      }
      .register_top h3 {
        float: left;
        font-size: 18px;
        color: #333;
      }
      .register_top p {
        float: right;
        font-size: 14px;
      }
      .register {
        width: 550px;
        height: 368px;
        /* background-color: #0ff; */
        margin: 50px auto;
      }
      .register ul li {
        margin-bottom: 20px;
      }
      label {
        display: inline-block;
        text-align: right;
        width: 88px;
        height: 36px;
        line-height: 36px;
      }
      .inp {
        width: 240px;
        height: 36px;
        border: 1px solid #000;
        margin-right: 10px;
      }
      .register ul li .error {
        color: #f00;
      }
      .error_icon,
      .success_icon {
        display: inline-block;
        width: 20px;
        height: 20px;
        vertical-align: middle;
        margin-right: 2px;
        background: url(./images/error.png) no-repeat;
      }
      .success {
        color: #0f0;
      }
      .success_icon {
        background: url(./images/success.png) no-repeat;
      }
      .safe {
        padding-left: 150px;
      }
      .safe em {
        padding: 0 12px;
      }
      .safe .ruo {
        background-color: #de1111;
      }
      .safe .zhong {
        margin: 0 1px;
        background-color: #40b83f;
      }

      .safe .qiang {
        background-color: #f79100;
      }
      .agree {
        margin-left: 100px;
      }
      .agree input {
        vertical-align: middle;
      }
      .agree a {
        color: #1ba1e6;
      }
      .sub {
        margin-left: 110px;
      }
      .sub input {
        width: 200px;
        height: 34px;
        line-height: 34px;
        text-align: center;
        color: #fff;
        background-color: #c81623;
      }
    </style>
  </head>
  <body>
    <!-- top标签开始 -->
    <div class="top w">
      <img src="./images/logo.png" alt="" />
    </div>
    <!-- top标签结束 -->
    <div class="centent w">
      <div class="register_top">
        <h3>注册新用户</h3>
        <p>
          我有账号，去
          <a href="javascript:;" class="style-red">登录</a>
        </p>
      </div>
      <div class="register">
        <ul>
          <li>
            <label for="">手机号：</label>
            <input type="tel" name="" id="label" class="inp" />
            <span class="error"><i class="error_icon"> </i>手机号码格式不正确，请从新输入</span>
          </li>
          <li>
            <label for="">短信验证码：</label>
            <input type="text" name="" id="label" class="inp" />
            <span class="success"><i class="success_icon"></i> 短信验证码输入正确！</span>
          </li>
          <li>
            <label for="">登录密码：</label>
            <input type="password" name="" id="label" class="inp" />
            <span class="error"> <i class="error_icon"> </i>密码不少于6位数，请从新输入 </span>
          </li>
          <li class="safe">
            安全程度：
            <em class="ruo">弱</em>
            <em class="zhong">中</em>
            <em class="qiang">强</em>
          </li>
          <li>
            <label for="">确认密码：</label>
            <input type="password" name="" id="label" class="inp" />
            <span class="error"> <i class="error_icon"> </i>密码不一致，请从新输入 </span>
          </li>
          <li class="agree">
            <input type="checkbox" name="" id="" />同意协议并注册
            <a href="javascript:;">《知果果用户协议》</a>
          </li>
          <li class="sub">
            <input type="submit" value="完成注册" />
          </li>
        </ul>
      </div>
    </div>
    <!-- foter开始 -->
    <footer class="footer">
      <div class="w">
        <!-- bottom开始 -->
        <div class="bottom">
          <div class="links">
            <a href="javascript:;">关于我们<span>|</span></a>
            <a href="javascript:;">联系我们<span>|</span></a>
            <a href="javascript:;">联系客服<span>|</span></a>
            <a href="javascript:;">商家入驻<span>|</span></a>
            <a href="javascript:;">营销中心<span>|</span></a>
            <a href="javascript:;">手机品优购<span>|</span></a>
            <a href="javascript:;">友情链接<span>|</span></a>
            <a href="javascript:;">销售联盟<span>|</span></a>
            <a href="javascript:;">品优购社区<span>|</span></a>
            <a href="javascript:;">品优购公益<span>|</span></a>
            <a href="javascript:;">English Site<span>|</span></a>
            <a href="javascript:;">Contact U</a>
          </div>
          <div class="copyright">
            地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn <br />
            京ICP备08001421号京公网安备110108007702
          </div>
        </div>
        <!-- bottom结束 -->
      </div>
    </footer>
    <!-- foter结束 -->
  </body>
</html>
